<template>
    <section class="comment-main base-main">
      <div class="comment-box line-bottom">
        <!--评分-->
        <div class="head line-bottom">
          <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2178677424,1439538613&fm=173&app=49&f=JPEG?w=218&h=146&s=5EB216C20218BC344CA98E42030060C3" alt="" />
          <div class="star inline-block">
            <p class="fs12 color7A7B82">评分</p>
            <van-rate
              v-model="value"
              color="#7E82F6"
              void-color="#EFEEEB"
              void-icon="star"
              :size="17"
            />
          </div>
        </div>
        <!--评分-->

        <!--文字评价-->
        <div class="comment-text">
          <textarea
            rows="1"
            wrap="hard"
          placeholder="来说说你的宝贝的评价吧"></textarea>
        </div>
        <!--文字评价-->

        <!--评价图片-->
        <div class="pic-box">
          <span
            class="pr inline-block img-box"
            v-for="(item,index) in imgList" :key="index"
            :class="(index == imgList.length -1) ? 'mr0' : ''"
          >
            <img :src="item" alt="" @click="handleImgPreview(index)">
            <van-icon
              class="close-btn inline-block pa fs20" name="clear"
              @click="handleDel(index)"/>
          </span>

          <!--上传按钮-->
          <van-uploader
            v-if="imgList.length < 6"
            :class="imgList.length > 0 && imgList.length != 4 ? 'ml10' : ''"
            class="uploader-box text-c"
            :after-read="onRead"
            multiple>
            <i class="iconfont iconshumajiadian"></i>
            <p class="fs14" v-if="imgList.length > 0"> {{imgList.length}}/6 </p>
            <p class="fs14" v-else> 添加图片 </p>
          </van-uploader>
          <!--上传按钮-->
        </div>
        <!--评价图片-->
      </div>

      <!--匿名设置-->
      <div class="cryptonym pdlr15">
        <van-checkbox
          class="inline-block"
          v-model="checked"
          checked-color="#7E82F6"
          @change="handleSetCryptonym">匿名</van-checkbox>
        <span class="flr fs14 color7A7B82">你写的评论将以匿名的形式展现</span>
      </div>
      <!--匿名设置-->

      <!--发布按钮-->
      <div class="btn pa">
        <span class="base-btn fs15" @click="handleSubComment">发布评价</span>
      </div>
      <!--发布按钮-->
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        value:2,
        message:'',
        imgList:[],//凭证数组
        checked:true,
      }
    },
    created(){
      this.$nextTick(function(){
        $('.uploader-box').css('height',$('.uploader-box').width())
      })
    },
    methods: {
      onRead(file) {
        if(this.imgList.length < 6){
          this.imgList.push(file.content)
        }else{
          this.$toast('最多上传6张')
        }
      },
      handleSetCryptonym(obj){
        console.log('11', obj);
      },
      //预览
      handleImgPreview(index){
        ImagePreview({
          images: this.imgList,
          startPosition: index,
          onClose() {
            // do something
          }
        });
      },
      //删除
      handleDel(index){
        this.$dialog.confirm({
          title: '删除',
          message: '确定删除这张图片吗？'
        }).then(() => {
          this.imgList.splice(index,1);
          this.$toast('删除成功')
        }).catch(() => {
        });
      },
      //发布评论
      handleSubComment(){
        this.$router.replace({
          name:'commentSuccess'
        })
      },
    },
  }
</script>

<style lang="scss">
  @import '../../assets/css/comment';
</style>
